<template>
  <a-drawer
    :title="title"
    :width="drawerWidth"
    @close="handleCancel"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <div
      :style="{
        width: '100%',
        border: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
      }"
    >
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="设施名称"
            prop="facilitiesName"
            hasFeedback
          >
            <a-input
              placeholder="请输入设施名称"
              v-model="model.facilitiesName"
              :readOnly="disableSubmit"
            />
          </a-form-model-item>

          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="型号"
            prop="model"
            hasFeedback
          >
            <a-input
              placeholder="请输入型号"
              v-model="model.model"
              :readOnly="disableSubmit"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="负责人"
          >
            <j-select-informant
              :title="'负责人'"
              placeholder="请选择负责人"
              :multiple="false"
              v-model="model.principalUserId"
            />
            <!-- <j-select-multi-user
              v-model="model.principal"
              valueKey="id"
            ></j-select-multi-user> -->
          </a-form-model-item>
          <a-form-model-item
           
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="填报员"
          >
            <j-select-informant
             :title="'填报员'"
              placeholder="请选择填报员"
              :multiple="false"
              v-model="model.informantUserId"
            />
            <!-- <j-select-multi-user
              v-model="model.informant"
              valueKey="id"
            ></j-select-multi-user> -->
          </a-form-model-item>

          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="classify"
            label="分类"
          >
            <a-input
              placeholder="请选择分类"
              v-model="model.classify"
              :readOnly="disableSubmit"
            />
          </a-form-model-item>

          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="location"
            label="位置"
          >
            <a-input
              placeholder="请输入位置"
              v-model="model.location"
              :readOnly="disableSubmit"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="source"
            label="来源"
          >
            <a-input
              placeholder="请选择分类"
              v-model="model.source"
              :readOnly="disableSubmit"
            />
          </a-form-model-item>
        </a-form-model>
      </a-spin>
      <a-row :style="{ textAlign: 'right' }">
        <a-button :style="{ marginRight: '8px' }" @click="handleCancel">
          关闭
        </a-button>
        <a-button :disabled="disableSubmit" @click="handleOk" type="primary"
          >确定</a-button
        >
      </a-row>
    </div>
  </a-drawer>
</template>

<script>
import {
  addEquipment,
  editEquipment,
  queryTreeList,
  duplicateCheck,
} from "@/api/api";
//   import Icons from './icon/Icons'
import JDepartSelectMultiUserModel from "@/components/Control/JDepartSelectMultiUser/index.vue";
export default {
  name: "PermissionModal",
  components: {
    JDepartSelectMultiUserModel,
  },
  // components: {Icons},
  data() {
    return {
      drawerWidth: 700,
      treeData: [],
      title: "操作",
      visible: false,
      disableSubmit: false,
      model: {},
      show: true, //根据菜单类型，动态显示隐藏表单元素
      menuLabel: "新增设施",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      iconChooseVisible: false,
      validateStatus: "",
    };
  },
  computed: {
    validatorRules: function () {
      return {
        name: [{ required: true, message: "请输入!" }],
        component: [{ required: this.show, message: "请输入!" }],
        url: [{ required: this.show, message: "请输入!" }],
        permsType: [{ required: true, message: "请输入!" }],
        perms: [
          { required: false, message: "请输入!" },
          { validator: this.validatePerms },
        ],
      };
    },
  },
  created() {},
  methods: {
    loadTree() {
      var that = this;
      queryTreeList().then((res) => {
        if (res.success) {
          //   console.log(res);
          that.treeData = [];
          let treeList = res.result.treeList;
          for (let a = 0; a < treeList.length; a++) {
            let temp = treeList[a];
            temp.isLeaf = temp.leaf;
            that.treeData.push(temp);
          }
        }
      });
    },
    add() {
      //初始化默认值
      this.edit({
        status: "1",
        permsType: "1",
        sortNo: 1.0,
        route: true,
        menuType: 0,
      });
    },
    edit(record) {
      //   console.log(record)
      this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      this.model = Object.assign({}, record);

      //根据菜单类型，动态展示页面字段
      //   console.log("record: ", record);
      this.show = record.menuType == 2 ? false : true;
      this.menuLabel = record.menuType == 2 ? "按钮/权限" : "菜单名称";

      this.visible = true;
      this.loadTree();
    },
    close() {
      this.$emit("close");
      this.disableSubmit = false;
      this.visible = false;
      this.$refs.form.resetFields();
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (
            (this.model.menuType == 1 || this.model.menuType == 2) &&
            !this.model.parentId
          ) {
            that.validateStatus = "error";
            that.$message.error("请检查你填的类型以及信息是否正确！");
            return;
          } else {
            that.validateStatus = "success";
          }
          that.confirmLoading = true;
          let obj;
          if (!this.model.id) {
            obj = addEquipment(this.model);
          } else {
            obj = editEquipment(this.model);
          }
          obj
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.close();
    },
    validateNumber(rule, value, callback) {
      if (!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)) {
        callback();
      } else {
        callback("请输入正整数!");
      }
    },
    validatePerms(rule, value, callback) {
      if (value && value.length > 0) {
        //校验授权标识是否存在
        var params = {
          tableName: "sys_permission",
          fieldName: "perms",
          fieldVal: value,
          dataId: this.model.id,
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback();
          } else {
            callback("授权标识已存在!");
          }
        });
      } else {
        callback();
      }
    },
    onChangeMenuType(e) {
      if (this.model.menuType == 2) {
        this.show = false;
        this.menuLabel = "按钮/权限";
      } else {
        this.show = true;
        this.menuLabel = "菜单名称";
      }
      this.$nextTick(() => {
        this.$refs.form.validateField(["url", "component"]);
      });
    },
    selectIcons() {
      this.iconChooseVisible = true;
    },
    handleIconCancel() {
      this.iconChooseVisible = false;
    },
    handleIconChoose(value) {
      //   console.log(value);
      this.model.icon = value;
      this.iconChooseVisible = false;
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
    handleParentIdChange(value) {
      if (!value) {
        this.validateStatus = "error";
      } else {
        this.validateStatus = "success";
      }
    },
  },
};
</script>

<style scoped>
</style>